<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>编辑朋友圈内容</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">编辑朋友圈内容</div>
                        <div class="layui-card-body">
                            <form class="layui-form" action="">
                                <input type="hidden" name="id" value="0">
                                <div class="layui-form-item layui-hide">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="status" value="0" title="禁用">
                                        <input type="radio" name="status" value="1" title="启用" checked>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">类型</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="type" value="1" title="文字" checked  lay-filter="switchType">
                                        <input type="radio" name="type" value="2" title="图文"   lay-filter="switchType">
                                        <input type="radio" name="type" value="3"
                                               title="视频"                                             lay-filter="switchType">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">内容</label>
                                    <div class="layui-input-block">
                                        <textarea name="content" placeholder="请输入内容，不超过2000个字符" class="layui-textarea" lay-verify="content"></textarea>
                                    </div>
                                </div>
                                <div id="imageBlock" class="layui-upload" style="display: none;">
                                    <button type="button" class="layui-btn layui-btn-normal" id="upload_image">上传图片</button>
                                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                        预览图：
                                        <div class="layui-upload-list" id="image_list" style="width: 300px;">
                                        </div>
                                    </blockquote>

                                    <div id="imageHiddenBlock" class="layui-hide"></div>
                                </div>
                                <div id="videoBlock" class="layui-upload" style="display: none;">
                                    <button type="button" class="layui-btn layui-btn-normal" id="upload_video">上传视频</button>
                                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                        视频文件：
                                        <div class="layui-upload-list" id="video_list" style="width: 300px;">
                                        </div>
                                    </blockquote>
                                    <div id="videoHiddenBlock" class="layui-hide"></div>
                                </div>
                                <div id="pageMetaBlock" style="display: none;">
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">文章链接</label>
                                        <div class="layui-input-block">
                                            <input name="contentUrl" placeholder="" class="layui-input" lay-verify="notEmpty" value="">
                                        </div>
                                    </div>
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">文章标题</label>
                                        <div class="layui-input-block">
                                            <input name="title" placeholder="" class="layui-input" lay-verify="notEmpty" value="">
                                        </div>
                                    </div>
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">缩略图</label>
                                        <div class="layui-input-block">
                                            <input name="image" placeholder="" class="layui-input" lay-verify="notEmpty" value="">
                                        </div>
                                    </div>
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">文章描述</label>
                                        <div class="layui-input-block">
                                            <textarea name="description" placeholder="" class="layui-textarea" lay-verify="notEmpty"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <a class="layui-btn" lay-submit lay-filter="formSubmit">提交</a>
                                        <a class="layui-btn layui-btn-primary" href="index.html">取消</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var imageNum = 0;
        var videoNum = 0;
        layui.use(['form', 'upload'], function(){
            var $ = layui.$
                ,form = layui.form
                ,upload = layui.upload;

            form.verify({
                content: function (value) {
                    if (value.length < 5) {
                        return '朋友圈内容不能少于5个字符';
                    } else if (value.length > 2000) {
                        return '朋友圈内容不能超过2000个字符';
                    }
                }
            });

            //监听提交
            form.on('submit(formSubmit)', function(data){
                layer.msg('提交中', {
                    shadeClose: false
                    ,icon: 16
                    ,shade: 0.01
                });
                $.ajax({
                    type: "POST",
                    url: "/sns_post/save",
                    data: data.field,
                    success:function(response){
                        var dataObj=$.parseJSON(response);
                        if (dataObj.code===0) {
                            layer.msg('数据提交成功', {icon: 6});
                            setTimeout(function(){
                                location.href = '/sns_post/index';
                            }, 1000);
                        } else {
                            layer.msg(dataObj.msg, {icon: 5});
                        }
                    },
                    error: function (request, status, error) {
                        layer.msg('哦噢，网络开小差了', {icon: 5});
                    }
                });
                return false;
            });

            //多图片上传
            upload.render({
                elem: '#upload_image'
                ,url: '/sns_post/upload'
                ,multiple: true
                ,number: 9
                ,field: 'image'
                ,accept: 'file' //普通文件
                ,exts: 'jpg|jpeg|png' //只允许上传图片
                ,size: 1024*4 //限制文件大小，单位 KB
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
//                obj.preview(function(index, file, result){
//                    $('#image_list').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px;">');
//                });
                }
                ,done: function(res){
                    //上传完毕
                    if(res.code == 0){
                        imageNum++;
                        addImageHiddenField(res.value, imageNum);
                        $('#image_list').append('<img id="imagePreview'+imageNum+'" num="'+imageNum+'" src="http://47.56.181.109/sns_material/1092/'+ res.value +'" alt="'+ res.origin +'" class="layui-upload-img" style="width: 100px;">');
                    }
                }
            });

            var addImageHiddenField = function (value, imageNum) {
                var html = '<input type="hidden" id="imageValue'+imageNum+'" name="image_list[]" value="'+value+'">';
                $('#imageHiddenBlock').append(html);
            };

            form.on('radio(switchType)', function(data){
                var typeId = data.value;
                if (typeId == 2) {
                    $('#imageBlock').css('display', 'block');
                    $('#pageMetaBlock').css('display', 'none');
                    $('#videoBlock').css('display', 'none');
                } else if (typeId == 4) {
                    $('#imageBlock').css('display', 'none');
                    $('#pageMetaBlock').css('display', 'block');
                    $('#videoBlock').css('display', 'none');
                } else if (typeId == 3) {
                    $('#imageBlock').css('display', 'none');
                    $('#pageMetaBlock').css('display', 'none');
                    $('#videoBlock').css('display', 'block');
                } else {
                    $('#imageBlock').css('display', 'none');
                    $('#pageMetaBlock').css('display', 'none');
                    $('#videoBlock').css('display', 'none');
                }
            });

            //多图片上传
            upload.render({
                elem: '#upload_video'
                ,url: '/sns_post/uploadVideo'
                ,multiple: false
                ,number: 1
                ,field: 'video'
                ,accept: 'file' //普通文件
                ,exts: 'mp4' //只允许上传图片
                ,size: 1024*8 //限制文件大小，单位 KB
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
//                obj.preview(function(index, file, result){
//                    $('#image_list').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px;">');
//                });
                }
                ,done: function(res){
                    //上传完毕
                    if(res.code == 0){
                        videoNum++;
                        addVideoHiddenField(res.value, videoNum);
                        $('#video_list').append('<a id="imagePreview'+videoNum+'" num="'+videoNum+'" src="http://47.56.181.109/sns_material/1092/'+ res.value +'" alt="'+ res.origin +'" class="layui-btn layui-btn-primary">'+ res.origin +'</a>');
                    }
                }
            });

            var addVideoHiddenField = function (value, videoNum) {
                var html = '<input type="hidden" id="videoValue'+videoNum+'" name="video_list[]" value="'+value+'">';
                $('#videoHiddenBlock').append(html);
            };
        });
    </script>
</div>
</body>
</html>
